<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="entity.ImageItem" %>
<%@ page import="util.ItemHelper" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stylesheets/battle.css">
		<%// Upload an image if there is one
			String url = request.getParameter("image-url");
			if (url != null) {
				String title = request.getParameter("image-title");
				String [] tags = request.getParameterValues("tag");
				ImageItem item = new ImageItem(url, title);
				if (tags != null) {
					String tagList = tags[0];
					
					for (int i=1; i < tags.length; i++) {
						tagList += "|" + tags[i];
					}
					item.setTags(tagList);
				}
			}
			
			// Submit battle results if there are any
			String img1 = request.getParameter("img1");
			if (img1 != null) {
				List<String> results = new ArrayList<String>();
				results.add(img1);
				results.add(request.getParameter("img2"));
				results.add(request.getParameter("img3"));
				results.add(request.getParameter("img4"));
				
				ItemHelper.resolveDuel(results);
			}
			
			System.err.println("Waiting for items...");
			List<ImageItem> list = ItemHelper.getItemsForDuel(4);
			System.err.println("Got items.");
			
			List<ImageItem> ladderItems = ItemHelper.getLadder(0, 5, null);
			List<ImageItem> catItems = ItemHelper.getLadder(0, 5, "cat");
			List<ImageItem> dogItems = ItemHelper.getLadder(0, 5, "dog");
			List<ImageItem> humanItems = ItemHelper.getLadder(0, 5, "human");
			List<ImageItem> birdItems = ItemHelper.getLadder(0, 5, "bird");
			List<ImageItem> petsItems = ItemHelper.getLadder(0, 5, "pets");
			List<ImageItem> wildlifeItems = ItemHelper.getLadder(0, 5, "wildlife");
		%>
		<script type="text/javascript">
			var imgList = [
		           	'<%= list.get(0).getUrl() %>',
		           	'<%= list.get(1).getUrl() %>',
		           	'<%= list.get(2).getUrl() %>',
		           	'<%= list.get(3).getUrl() %>'
	        ];
			
			var allList = [];
			<%
				for (ImageItem item : ladderItems) { %>
					allList.push({
						url : '<%= item.getUrl() %>',
						rating : <%= item.getRating() %>,
						title : '<%= item.getTitle() %>'
					});
				<%}
			%>

			var catList = [];
			<%
				for (ImageItem item : catItems) { %>
					catList.push({
						url : '<%= item.getUrl() %>',
						rating : <%= item.getRating() %>,
						title : '<%= item.getTitle() %>'
					});
				<%}
			%>
			
			var dogList = [];
			<%
				for (ImageItem item : dogItems) { %>
					dogList.push({
						url : '<%= item.getUrl() %>',
						rating : <%= item.getRating() %>,
						title : '<%= item.getTitle() %>'
					});
				<%}
			%>
			
			var humanList = [];
			<%
				for (ImageItem item : humanItems) { %>
					humanList.push({
						url : '<%= item.getUrl() %>',
						rating : <%= item.getRating() %>,
						title : '<%= item.getTitle() %>'
					});
				<%}
			%>
			
			var birdList = [];
			<%
				for (ImageItem item : birdItems) { %>
					birdList.push({
						url : '<%= item.getUrl() %>',
						rating : <%= item.getRating() %>,
						title : '<%= item.getTitle() %>'
					});
				<%}
			%>
			
			var petsList = [];
			<%
				for (ImageItem item : petsItems) { %>
					petsList.push({
						url : '<%= item.getUrl() %>',
						rating : <%= item.getRating() %>,
						title : '<%= item.getTitle() %>'
					});
				<%}
			%>
			
			var wildlifeList = [];
			<%
				for (ImageItem item : wildlifeItems) { %>
					wildlifeList.push({
						url : '<%= item.getUrl() %>',
						rating : <%= item.getRating() %>,
						title : '<%= item.getTitle() %>'
					});
				<%}
			%>
		</script>
		<script type="text/javascript" src="scripts/battle.js"></script>
	</head>
	<body>
		<div id='top-pane'>
			<div id='title'>Img Battle</div>
			<a id='upload' href='upload.jsp'>
				<div id='plus'></div>
				<div id='upload-text'>Upload An Image</div>
			</a>
		</div>
		<div id='bottom-pane'>
			<div id='left-pane'>
				<div id='battle-pane'>
					<div class='image-wrapper'>
						<div id="a" class="image-holder">
							<img class='battle-img'></img>
						</div>
					</div>
					<div class='image-wrapper'>
						<div id="b" class="image-holder">
							<img class='battle-img'></img>
						</div>
					</div>
				</div>
				<div id='last-battle-pane'>
					<div class='section'>
						<div class='section-header'>Current Battle</div>
						<table id='last-battle'>
							<tr>
								<td class='sort-order'>1</td>
								<td class='sort-order'>2</td>
								<td class='sort-order'>3</td>
								<td class='sort-order'>4</td>
							</tr>
							<tr>
								<td><div class="image-holder"><img id='first'  class='empty'></div></td>
								<td><div class="image-holder"><img id='second' class='empty'></div></td>
								<td><div class="image-holder"><img id='third'  class='empty'></div></td>
								<td><div class="image-holder"><img id='fourth' class='empty'></div></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<div id='right-pane'>
				<div id='top-section' class='section'>
					<div class='section-header'>Tops in 
						<select id='category-select'>
							<option value="all">All Categories</option>
							<option value="cat">Cats</option>
							<option value="dog">Dogs</option>
							<option value="bird">Birds</option>
							<option value="human">Humans</option>
							<option value="pets">Pets</option>
							<option value="wildlife">Wildlife</option>
						</select>
					</div>
					<table id='top-table'>
						<tr>
							<th>Img</th>
							<th>Rating</th>
							<th>Title</th>
						</tr>
						<tr>
							<td><div class="image-holder"><img class='thumb' src='<%= ladderItems.get(0).getUrl() %>'></div></td>
							<td><div><%= ladderItems.get(0).getRating() %></div></td>
							<td><div><%= ladderItems.get(0).getTitle() %></div></td>
						</tr>
						<tr>
							<td><div class="image-holder"><img class='thumb' src='<%= ladderItems.get(1).getUrl() %>'></div></td>
							<td><div><%= ladderItems.get(1).getRating() %></div></td>
							<td><div><%= ladderItems.get(1).getTitle() %></div></td>
						</tr>
						<tr>
							<td><div class="image-holder"><img class='thumb' src='<%= ladderItems.get(2).getUrl() %>'></div></td>
							<td><div><%= ladderItems.get(2).getRating() %></div></td>
							<td><div><%= ladderItems.get(2).getTitle() %></div></td>
						</tr>
						<tr>
							<td><div class="image-holder"><img class='thumb' src='<%= ladderItems.get(3).getUrl() %>'></div></td>
							<td><div><%= ladderItems.get(3).getRating() %></div></td>
							<td><div><%= ladderItems.get(3).getTitle() %></div></td>
						</tr>
						<tr>
							<td><div class="image-holder"><img class='thumb' src='<%= ladderItems.get(4).getUrl() %>'></div></td>
							<td><div><%= ladderItems.get(4).getRating() %></div></td>
							<td><div><%= ladderItems.get(4).getTitle() %></div></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>